<template>
  <svg ref="svg1" id="svg1" :width="svg.width" :height="svg.height" style="border: 1px solid red"
       xmlns="http://www.w3.org/2000/svg">
    <!--        <defs>
              &lt;!&ndash; 箭头 &ndash;&gt;
              <marker id="arrow" markerUnits="strokeWidth" markerWidth="12" markerHeight="12" viewBox="0 0 12 12" refX="6" refY="6" orient="auto">
                <path d="M2,2 L10,6 L2,10 L6,6 L2,2" style="fill: #000000;"/>
              </marker>
              <linearGradient id="line-gradient" x1="0" y1="0" x2="1" y2="0">
                <stop offset="0" stop-color="#990000" stop-opacity="0" />
                <stop offset="1" stop-color="#990000" stop-opacity="1" />
              </linearGradient>
            </defs>-->
  </svg>

</template>

<script>
import {draw,move,zoom} from '@/svgutil/svg-draw';
import {initPos} from '@/svgutil/comm-method';
import {defineData} from "@/views/roof2/define-data1";

export default {
  name: "roof-test-2",
  data() {
    return {
      svg: {
        width: '100%',
        height: 600,
      },
      values: {
        'P001': {v: 1.23, w: 0},
        'P002': {v: 2.99, w: 1},
      },
      interval: {},
      ...initPos,
    }
  },
  created() {

  },
  mounted() {
    this.drawData = defineData(this.values);
    this.drawSvg();
    let svgEle = document.getElementById('svg1');
    svgEle.addEventListener('mousewheel', this.onStroll);
    svgEle.addEventListener('mousedown', (e) => {
      if (e.button === 0) {
        this.mouseDown = true;
        this.moveFromX = e.offsetX;
        this.moveFromY = e.offsetY;
      }
    });
    svgEle.addEventListener('mouseup', (e) => {
      if (e.button === 0) {
        this.mouseDown = false;
        this.moveFromX = 0;
        this.moveFromY = 0;
      }else if(e.button === 1){
        Object.assign(this,initPos);
        this.drawData = defineData(this.values);
        this.drawSvg();
      }
    });
    svgEle.addEventListener('mousemove', (e) => {
      //console.log(e);
      if (this.mouseDown) {
        this. deltaX = e.offsetX - this.moveFromX;
        this. deltaY = e.offsetY - this.moveFromY;
        this.moveFromX = e.offsetX;
        this.moveFromY = e.offsetY;
        move([this.drawData],{deltaX: this.deltaX, deltaY: this.deltaY});
        //this.moveData();
        this.drawSvg();
      }

    })
  },
  methods: {
    onStroll(e) {
      if (e.deltaY > 0 && this.totalScale < this.totalScaleMax) {
        this.scale = 2;
      } else if(e.deltaY < 0 && this.totalScale > this.totalScaleMin){
        this.scale = 0.5;
      }else{
        return;
      }
      this.cx = e.offsetX;
      this.cy = e.offsetY;
      this.totalScale *= this.scale;
      zoom([this.drawData],{cx: this.cx,cy: this.cy,scale: this.scale,totalScale: this.totalScale});
      this.drawSvg();
      this.lastScale = this.scale;
      this.lastCx = this.cx;
      this.lastCy = this.cy;
    },
    drawSvg() {
      draw("svg1", [this.drawData], this.values);
    },
  }
}
</script>

<style scoped>
#svg1 {
  /*background: #2c3e50;*/
}

.line {
  fill: 'none';
}
</style>